<template>
  <Form ref="formRef" :model="formState" layout="vertical">
    <Form.Item name="forwardMsgToDefaultRuleChain">
      <Checkbox v-model:checked="formState.forwardMsgToDefaultRuleChain">
        Forward message to the originator's default rule chain
      </Checkbox>
    </Form.Item>
    <Form.Item
      :label="t('tb.ruleChain.nodeAction.ruleChain')"
      name="ruleChainId"
      :rules="[{ required: true, message: t('tb.ruleChain.nodeAction.ruleChainRequired') }]"
    >
      <Select v-model:value="formState.ruleChainId" :placeholder="t('tb.ruleChain.nodeAction.ruleChainPlaceholder')">
        <Select.Option v-for="(option, index) in ruleChainOptions" :key="index" :value="option.value">
          {{ option.label }}
        </Select.Option>
      </Select>
    </Form.Item>
  </Form>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'rule-chain',
  });
</script>
<script lang="ts" setup>
  import { ref, watch, defineComponent, reactive, onMounted } from 'vue';
  import { Form, Select, Checkbox } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { FormInstance } from 'ant-design-vue/lib/form';
  import { ruleChainList } from '/@/api/tb/ruleChain';

  interface Configuration {
    ruleChainId: string;
    forwardMsgToDefaultRuleChain: boolean;
  }

  const props = defineProps({
    configuration: {
      type: Object as PropType<Configuration>,
      required: true,
    },
    ruleChainId: { type: String, default: '' },
  });

  const { t } = useI18n('tb');

  const ruleChainOptions = ref<any[]>([]);

  const formRef = ref<FormInstance>();

  const formState = reactive<any>({
    ruleChainId: undefined,
    forwardMsgToDefaultRuleChain: false,
  });

  watch(
    () => props.configuration,
    () => {
      formState.ruleChainId = props.configuration.ruleChainId;
      formState.forwardMsgToDefaultRuleChain = props.configuration.forwardMsgToDefaultRuleChain;
    },
    { immediate: true },
  );

  onMounted(async () => {
    await fetchRuleChainList();
  });

  async function fetchRuleChainList() {
    const ruleChainListResult = await ruleChainList(
      { pageSize: 50, page: 0, sortProperty: 'name', sortOrder: 'ASC' },
      'CORE',
    );
    ruleChainOptions.value = ruleChainListResult.data
      .filter((item) => item.id.id != props.ruleChainId)
      .map((item) => {
        return {
          value: item.id.id,
          label: item.name,
        };
      });
    //TODO : 过滤规则本规则链的 id   使用Inject
  }

  async function getConfiguration() {
    try {
      return await formRef.value?.validate();
    } catch (error: any) {
      throw error;
    }
  }

  defineExpose({ getConfiguration });
</script>
